<template>
	<div class="goods_detail">
		<header class="top_bar">
			<a onclick="window.history.go(-1)" class="icon_back"></a>
			<h3 class="cartname">
				<span @click="active='tab-container1'" :class="{selected: active=='tab-container1'}" class="padding_lf6_rg6">商品</span>
				<span @click="active='tab-container2'" :class="{selected: active=='tab-container2'}" class="padding_lf6_rg6">详情</span>
				<span @click="active='tab-container3'" :class="{selected: active=='tab-container3'}" class="padding_lf6_rg6">评价</span>
			</h3>
			<a href="#" class="icon_menu"></a>
		</header>
		<main class="detail_box padding_top45 padding_bottom60">
			<mt-tab-container v-model="active">
				<mt-tab-container-item id="tab-container1">
					<section class="banner_box">
						<swiper :options="swiperOption" ref="mySwiper">
							<swiper-slide v-for="(item, index) in productImgs" :key="index">
								<!--<img :src="src + item.path" style="height: 750px;">-->
								<img v-lazy="root + item.ImgPathMid" style="height: 375px;width: 100%;" />
							</swiper-slide>
							<div class="swiper-pagination" slot="pagination"></div>
						</swiper>
					</section>
					<section class="product_info clearfix">
						<div class="product_left">
							<p class="p_name">{{goodsData.ProductName}}</p>
							<div class="product_pric">
								<span>￥</span>
								<span class="rel_price">{{SkuItems.SalePrice}}</span>
							</div>
						</div>
					</section>
					<section class="product_intro overflow_hidden">
						<div @click="popupVisiblePType=true" class="">
							<p class="pro_det font_size14 fl width90">
								<span class="color666 margin_right10">已选</span>
								<span v-for="etem in seletedTypeData" class="color000 margin_right10">{{etem}}</span>
								<span class="color000">数量：{{goodsNums}}</span>
							</p>
							<p class="fr width10 text_align_rg">
								<span>&bull;</span>
								<span>&bull;</span>
								<span>&bull;</span>
							</p>
						</div>
					</section>
					<section class="product_intro">
						<p @click="active='tab-container3'" class="pro_det font_size14 overflow_hidden">
							<span class="color666 margin_right10 fl">评价（{{commentNums}}）</span>
							<span class="fr">&gt;</span>
							<span v-if="commentNums>0" class="color_main_red fr" style="margin: 0 auto;">
								{{((goodsData.Five+goodsData.Four+goodsData.Three)/(goodsData.Five+goodsData.Four+goodsData.Three+goodsData.Tow+goodsData.One)).toFixed(2)*100}}%
							</span>
							<span v-if="commentNums>0" class="fr">好评率 </span>
						</p>
						<div v-for="item in commentsList.slice(0, 3)" class="border_bot_dcdcdc padding-top10 background_fff padding_lf10_rg10">
							<p class="pro_det font_size14 overflow_hidden padding_bottom10">
								<span class="color666 margin_right10 fl">{{item.UserName}}</span>
								<span class="color000 fl">
									<yd-cell-item>
										<yd-rate slot="left" :readonly=true v-model="item.ReviewMark"></yd-rate>
									</yd-cell-item>
								</span>
								<span class="color666 float_right font_size12">
									{{item.ReviewDate}}
								</span>
							</p>
							<p class="pro_det font_size14 overflow_hidden padding_bottom10">
								<span class="color000">{{item.ReviewContent}}</span>
							</p>
							<p v-if="item.ReplyContent" class="pro_det font_size14 overflow_hidden padding_bottom10">
								<span>商家回复：</span>
								<span class="color000">{{item.ReplyContent}}</span>
								<span class="color666 float_right font_size12">{{item.ReplyDate}}</span>
							</p>
						</div>
					</section>
				</mt-tab-container-item>
				<!--详情-->
				<mt-tab-container-item id="tab-container2">
					<div class="ql-editor">
						<div class="" v-html="goodsData.MobbileDescription">

						</div>
					</div>
				</mt-tab-container-item>
				<!--评论-->
				<mt-tab-container-item id="tab-container3">
					<div class="rate_nums_wrap background_f0 border_bot_dcdcdc width100 overflow_hidden">
						<div class="fl width25">
							<p>全部</p>
							<p>{{goodsData.One+goodsData.Tow+goodsData.Three+goodsData.Four+goodsData.Five}}</p>
						</div>
						<div class="fl width25">
							<p>好评</p>
							<p>{{goodsData.Five}}</p>
						</div>
						<div class="fl width25">
							<p>中评</p>
							<p>{{goodsData.Tow+goodsData.Three+goodsData.Four}}</p>
						</div>
						<div class="fl width25">
							<p>差评</p>
							<p>{{goodsData.One}}</p>
						</div>
					</div>
					<div v-for="item in commentsList" class="border_bot_dcdcdc padding-top10 background_fff padding_lf10_rg10">
						<p class="pro_det font_size14 overflow_hidden padding_bottom10">
							<span class="color666 margin_right10 fl">{{item.UserName}}</span>
							<span class="color000 fl">
								<yd-cell-item>
									<yd-rate slot="left" :readonly=true v-model="item.ReviewMark"></yd-rate>
								</yd-cell-item>
							</span>
							<span class="color666 float_right font_size12">
								{{item.ReviewDate}}
							</span>
						</p>
						<p class="pro_det font_size14 overflow_hidden padding_bottom10">
							<span class="color000">{{item.ReviewContent}}</span>
						</p>
						<p v-if="item.ReplyContent" class="pro_det font_size14 overflow_hidden padding_bottom10">
							<span>商家回复：</span>
							<span class="color000">{{item.ReplyContent}}</span>
							<span class="color666 float_right font_size12">{{item.ReplyDate}}</span>
						</p>
					</div>
				</mt-tab-container-item>
			</mt-tab-container>
		</main>
		<footer class="cart_d_footer">
			<div class="m" style="display: block;">
				<ul class="m_box" style="float: left;">
					<!--<li class="m_item">
						<a href="javascript:void(0)" class="m_item_link">
							<em class="m_item_pic"></em>
							<span class="m_item_name">卖家</span>
						</a>
					</li>
					<li class="m_item">
						<a href="javascript:void(0)" class="m_item_link">
							<em class="m_item_pic two"></em>
							<span class="m_item_name">关注</span>
						</a>
					</li>-->
					<li class="m_item" style="padding-top: 0;">
						<router-link to="/cart">
							<a href="javascipt:void(0)" class="m_item_link position_rel" style="height: 60px; width: 100px;">
								<em class="m_item_pic three"></em>
								<span class="m_item_name">购物车</span>
								<span class="cart_num">{{cartProductNums}}</span>
							</a>
						</router-link>
					</li>
				</ul>
				<div class="btn_box clearfix" style="width: 40%;">
					<a @click="addCart" href="javascript:void(0)" class="buy_now" style="width: 100%;">加入购物车</a>
					<!--<a href="#" class="buybuy">立即购买</a>-->
				</div>
			</div>
		</footer>
		<!--型号-->
		<mt-popup v-model="popupVisiblePType" position="bottom">
			<div class="width100 height100 padding_lf6_rg6 box_shadow_top background_fff">
				<div class="border_bot_dcdcdc type_popup_header position_rel">
					<div class="fl product_header_pic_warp">
						<img :src="root + SkuItems.SkuImg" />
					</div>
					<div class="fl product_descript_warp">
						<p class="line_height2 color_main_red font_weight_bold">￥{{SkuItems.SalePrice}}</p>
						<p class="color666">商品库存：{{SkuItems.Stock}}</p>
					</div>
				</div>
				<div v-for="(item, ind) in typeData" class="">
					<div class="fl padding_top6_bot6 color666 line_height2">
						{{item.AttributeName}}
					</div>
					<div class="clear_both goods_type_wrap">
						<span @click="selectType(item, ind, i)" v-for="(i, index) in item.AttributeList" :class="i.isSelected===true?'selected':''" class="product_color_type">
							{{i.ValueStr}}
						</span>
					</div>
				</div>
				<div class=" padding_top6_bot6 overflow_hidden line_height2">
					<div class="fl color666">
						数量
					</div>
					<div class="fr overflow_hidden">
						<div @click="reduceNumsBtn" class="reduce_nums">&minus;</div>
						<input @change="changeGoodsNums" v-model="goodsNums" class="num_input" type="number" name="" id="" value="" />
						<div @click="addNumsBtn" class="add_nums">+</div>
					</div>
				</div>
				<div @click="popupVisiblePType=false" class="btn_bot">
					确定
				</div>
			</div>
		</mt-popup>
	</div>
</template>
<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import { TabContainer, TabContainerItem } from 'mint-ui';
	import { Toast } from 'mint-ui';

	export default {
		mounted() {
			console.log('this.$route.params.id', this.$route.params.id)
			this.fetchData(this.$route.params.id);
			//			this.fetchAdrData();
			this.fetchGuiGeData(this.$route.params.id)
			this.getDataComment(this.$route.params.id)
			this.getProductImgs(this.$route.params.id)
			this.getCartProductNums()

		},
		data() {
			return {
				root: this.root,
				active: 'tab-container1',
				addressData: [],
				seletedAddressData: {},
				goodsData: {},
				popupVisiblePType: false,
				popupVisibleAdr: false,
				typeData: [],
				seletedTypeData: [],
				goodsNums: 1,
				typeSelected: true,
				selectedIndex: 0,
				checkedList: [],
				SkuItems: {},
				productImgs: [],
				commentsList: [],
				cartProductNums: 0,
				commentNums: 0,
				swiperOption: {
					initialSlide: 0,
					pagination: {
						el: '.swiper-pagination',
						type: 'fraction',
					},
					loop: true,
					speed: 400,
					//					autoplay: {
					//						delay: 4500,
					//						disableOnInteraction: false,
					//					},
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true //修改swiper的父元素时，自动初始化swiper
				}
			}
		},
		computed: {

		},
		watch: {
			$route(to) {
				var reg = /detail\/\d+/;
				if(reg.test(to.path)) {
					var categotyId = this.$route.params.id || 0;
					this.fetchData(categotyId);
				}
			},
		},
		methods: {
			fetchData(id) {
				var _this = this;
				_this.$http.get('/Client/Products/' + id + '?OnSale=1', null, localStorage.Authorization, res => {
					console.log('详情页res', res)
					if(res.code === 200) {
						_this.goodsData = res.data;
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			fetchAdrData() {
				var _this = this;
				_this.$http.get('/client/Address', null, localStorage.Authorization, res => {
					if(res.code === 200) {
						_this.addressData = res.data.list
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
				_this.$http.get('/client/Members', {
					defaultAddress: 1
				}, localStorage.Authorization, res => {
					if(res.code === 200) {
						_this.seletedAddressData = res.data
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			fetchGuiGeData(id) {
				var _this = this;
				_this.$http.get('/Client/ProductAttrs', {
					ProductId: id,
					IsSku: 1,
				}, localStorage.Authorization, res => {
					console.log('获取商品规格属性res', res)
					if(res.code === 200) {
						_this.typeData = res.data.list

						if(res.data.dataCount > 0) {
							for(var i = 0; i < _this.typeData.length; i++) {
								for(var c = 0; c < _this.typeData[i].AttributeList.length; c++) {
									if(c == 0) {
										_this.seletedTypeData.push(_this.typeData[i].AttributeList[c].ValueStr)
										_this.checkedList.push([_this.typeData[i].AttributeId, _this.typeData[i].AttributeList[c].ValueId])
										_this.$set(_this.typeData[i].AttributeList[c], 'isSelected', true)
										_this.getDataSku()

									} else {
										_this.$set(_this.typeData[i].AttributeList[c], 'isSelected', false)
									}
								}
							}
						}
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			addCart() {
				var _this = this;
				if(_this.SkuItems.Stock === 0) {
					Toast('该商品库存为0，不能添加到购物车！')
					return false;
				}
				_this.$http.post('/client/Carts', {
					ProductId: _this.goodsData.Id,
					SkuId: _this.SkuItems.SkuId,
					Quantity: _this.goodsNums,
					ProductName: _this.goodsData.ProductName,
					ImgPath: _this.goodsData.ImgPath,
				}, localStorage.Authorization, res => {
					if(res.code === 200) {
						console.log('添加购物车res', res)
						Toast(res.data)
						_this.getCartProductNums()
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					} else {
						Toast(res.error)
					}
				})
			},
			reduceNumsBtn() {
				if(this.goodsNums <= 1) {
					return false;
				}
				this.goodsNums--
			},
			addNumsBtn() {
				if(this.goodsNums >= this.SkuItems.Stock) {
					return false;
				}
				this.goodsNums++
			},
			changeGoodsNums() {
				var oldNums = this.goodsNums
				if(this.goodsNums >= this.SkuItems.Stock) {
					this.goodsNums = 1
					return false;
				}
				if(this.goodsNums <= 0) {
					this.goodsNums = 1
					return false;
				}
			},
			selectType(item, itemIndex, itemChild) {
				var _this = this;
				for(var i = 0; i < _this.checkedList.length; i++) {
					if(item.AttributeId == _this.checkedList[i][0]) {
						_this.checkedList[i][1] = itemChild.ValueId
						_this.seletedTypeData[i] = itemChild.ValueStr
					}
				}
				for(var f = 0; f < _this.typeData[itemIndex].AttributeList.length; f++) {
					_this.typeData[itemIndex].AttributeList[f].isSelected = false;
				}
				itemChild.isSelected = true;
				_this.getDataSku()
			},
			getDataComment(id) {
				let _this = this
				_this.$http.get('/client/Comments', {
					ProductId: id
				}, localStorage.Authorization, res => {
					console.log('获取评论列表res', res)
					if(res.code === 200) {
						_this.commentsList = res.data.list
						_this.commentNums = res.data.list.length
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			getDataSku() {
				var _this = this
				console.log('_this.checkedList', _this.checkedList)
				_this.$http.post('/base/sku', {
					SkuItems: _this.checkedList
				}, localStorage.Authorization, res => {
					console.log('获取型号的商品库存等信息res', res)
					if(res.code === 200) {
						_this.SkuItems = res.data
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			getProductImgs(id) {
				var _this = this;
				_this.$http.get('/client/ProductImgs', {
					ProductId: id
				}, localStorage.Authorization, res => {
					console.log('获取商品图片res', res)
					if(res.code === 200) {
						_this.productImgs = res.data.list

					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			getCartProductNums() {
				var _this = this;
				_this.$http.get('/client/Carts', null, localStorage.Authorization, res => {
					console.log('获取购物车商品数量res', res)
					if(res.code === 200) {
						_this.cartProductNums = res.data.dataCount;
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			goCart() {
				this.$router.push({
					path: '/cart'
				})
			}

		}
	}
</script>
<style>
	@import '../assets/css/detail.css';
	.mint-popup-bottom {
		width: 100%;
		height: 70%;
	}
	
	.detail_box .banner_box {
		height: auto;
	}
	
	.banner_box .banner_child_box {
		top: 0;
		margin-bottom: 10px;
	}
	
	.cart_num {
		position: absolute;
		top: 0px;
		right: 50%;
		display: inline-block;
		width: 18px;
		height: 18px;
		border: 1px solid red;
		border-radius: 50%;
		color: red;
		line-height: 18px;
		background: #fff;
		text-align: center;
		font-size: 12px;
		margin-right: -23px;
	}
	
	.cartname span {
		display: inline-block;
		padding: 0px 18px;
		line-height: 2em;
	}
	
	.cartname span.selected {
		display: inline-block;
		padding: 0px 18px;
		border-bottom: 1px solid red;
		color: red;
		line-height: 2em;
	}
	
	.rate_nums_wrap {
		text-align: center;
		padding: 10px 0;
	}
	
	.rate_nums_wrap p {
		color: #666;
	}
</style>
<style scoped="scoped">
	.swiper-pagination-fraction {
		text-align: right;
		color: #fff;
		font-size: 15px;
		padding-right: 10px;
	}
</style>